<template>
  <div ref="recommend" class="recommend">
    <scroll :data="RecSongList" ref="scroll" class="wrapper">
      <div class="content">
        <home-banner :BannerList="bannerList" @img-load="scrollRefresh"></home-banner>
        <h1 class="hotSong-list">热门歌单推荐</h1>
        <recsong-list :RecSongList="RecSongList"></recsong-list>
        <!-- 数据未加载出时显示 -->
      </div>
      <div>
        <van-loading type="spinner" vertical v-show="!RecSongList.length"
          >数据加载中...</van-loading
        >
      </div>
    </scroll>
    <!-- <Confirm></Confirm> -->
  </div>
</template>

<script>
// 引用自身组件
import HomeBanner from '@/components/recommend/Banner'
import RecsongList from '@/components/recommend/RecsongList'
// better-scroll 组件
import Scroll from '@/components/base/Scroll'
// import Confirm from '@/components/base/Confirm'
import { playListMixin } from '../common/js/mixin'
export default {
  mixins: [playListMixin],
  components: {
    HomeBanner,
    RecsongList,
    Scroll
    // Confirm
  },
  data () {
    return {
      // 轮播图
      bannerList: [],
      // 推荐歌单
      RecSongList: []
    }
  },

  methods: {
    handlePlaylist (playlist) {
      const bottom = playlist.length > 0 ? '60px' : ''
      // list是个vue components，.$el取元素
      this.$refs.recommend.style.bottom = bottom
      // console.log(this.$refs.wrapper)
      this.$refs.scroll.refresh()
    },
    //  获取轮播图数据
    async getBanner () {
      // const bannerList = this.$http.get(api.getBannerList())
      const {
        data: { data: res }
      } = await this.$http.get('/api/recommend/banner')
      this.bannerList = res
    },
    //  获取推荐歌单数据
    async getRecSongList () {
      const {
        data: { data: res }
      } = await this.$http.get('/api/recommend/playlist/u')
      this.RecSongList = res.list
    },
    scrollRefresh () {
      this.$refs.scroll.refresh()
    }
  },
  mounted () {
    setTimeout(() => {
      // 加载轮播图
      this.getBanner()
      // 加载轮播图
      this.getRecSongList()
    }, 20)
  }
}
</script>

<style lang="stylus" scoped>
.recommend {
  position: fixed;
  width: 100%;
  top: 88px;
  bottom: 0;
}
.wrapper {
  height:100%;
  overflow:hidden;
  .content {
    width: 100%;
    height: auto;
    transform: translateZ(1px)
    .hotSong-list {
      height: 66px;
      line-height: 66px;
      text-align:center;
      font-size: 14px;
      color: #ffcd32;
    }
  }
}
</style>
